<!-- 文件引用 -->

<!-- 样式代码 -->
<style type="text/css">
	.content {
		margin: 20px;
	}

	.content ul {
		padding-top: 10px;
		padding-bottom: 10px
	}

	.content .layui-nav .url {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
		cursor: pointer;
		text-align: center;
		line-height: 40px
	}

	.content .bar {
		margin-bottom: 0.5rem
	}

	.content .layui-nav {
		background: white;
		color: #6d6d6d;
		padding: 0
	}

	.content .table_file_name {
		color: #00986f;
	}

	.content .table_file_name:hover {
		cursor: pointer;
		color: #5fb878;
	}

	.content .forbid {
		color: #cacaca
	}

	/* 目录格式标签 */
	.path-bar a,.file-list-content tr td{
		cursor: pointer;
	}
	.path-bar .path-conment .layui-icon{
		color: #b1b1b1;
	}

	/* .table-bar-operation-item:hover{
		visibility: visible;
	}

	.table-bar-operation-item{
		visibility:hidden;
	} */

	.fast-menu{
		float: right;
	}

	/* 修复表格勾选错位 */
	.layui-table-cell .layui-form-checkbox[lay-skin=primary]{
		top: 5px;
    	padding: 0;
	}
</style>

<!-- 页面代码 -->

<div class="content">
	<div class="layui-row">
		<div class="layui-col-md2">
			<div id="admin_menu"></div>
		</div>
		<div class="layui-col-md10">
			<div class="cloud-card bar">
			
				<div class="layui-inline">
					<button class="layui-btn layui-btn-xs layui-btn-primary fast-menu-btn-upload" id="add_user">+ 添加新用户</button>
				</div>
				<div class="layui-inline path-bar" id="path">
					<div class="layui-inline path-conment">
						<!-- <div class="layui-inline path-conment-item">
								<i class="layui-icon layui-icon-right line"></i>
								<a data-filename="9633" data-path="/" data-id="123" id="path-conment-item-1612620983364">9633</a>
							</div> -->
					</div>
				</div>
				<div class="layui-inline fast-menu">
					<div class="layui-btn-group">
			
					</div>
			
				</div>
			</div>
			<div class="cloud-card table layui-unselect file-body" id="checkImgWindow">
				<table class="layui-hide" id="data-table" lay-filter="data-table"></table>
			</div>
			</div>
		</div>
	</div>

	
</div>

<!-- 模板代码 -->
<script type="text/html" id="table-bar-operation">
	<div class="table-bar-operation-item">
		<a class="layui-btn layui-btn-xs" lay-event="update" data-id={{d.id}}>修改</a>
		<a class="layui-btn layui-btn-xs" lay-event="set_capacity" data-id={{d.id}}>容量</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-id={{d.id}}>删除</a>
	</div>
</script>

<script type="text/html" id="table-bar-status">
	<div>
		{{# if(d.status==1){ }}
			<div style="color: #00986f;">已启用</div>
		{{# }else{ }}
			<div style="color:brown;">已停用</div>
		{{# } }}
	</div>
</script>

<script type="text/html" id="table-bar-capacity">
	<div>
		{{app.bytesToSize(d.capacity*1024*1024)}}
	</div>
</script>



<script type="text/html" id="table-bar-is_admin">
	<div>
		{{# if(d.is_admin==1){ }}
			<div>管理员</div>
		{{# }else{ }}
			<div>普通用户</div>
		{{# } }}
	</div>
</script>

<!-- 添加设置模板 -->
<script type="text/html" id="tpl-edit-user-info">
	<div class="layui-form layui-form-pane" style="padding: 20px;" lay-filter="edit_user_info">

		<input type="text" name="id" class="layui-input layui-hide">

		<div class="layui-form-item">
			<label class="layui-form-label">账号</label>
			<div class="layui-input-block">
				<input type="text" name="username" autocomplete="off" lay-verify="required" placeholder="请输入账号" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">昵称</label>
			<div class="layui-input-block">
				<input type="text" name="u_name" lay-verify="required" placeholder="请输入昵称" autocomplete="off"
					class="layui-input">
			</div>
		</div>
	
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-inline">
				<input type="password" name="password" placeholder="6-16位新密码" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">留空则不修改</div>
		</div>
	
		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<select name="status" lay-filter="aihao">
					<option value="0" selected="">停用</option>
					<option value="1" >启用</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">角色</label>
			<div class="layui-input-block">
				<select name="is_admin">
					<option value="0" selected="">普通用户</option>
					<option value="1">管理员</option>
				</select>
			</div>
		</div>

		<div></div>
	
		<div class="layui-form-item">
			<button class="layui-btn" id="save_user_info_btn" lay-submit="" lay-filter="">保存</button>
		</div>
	</div>
</script>

<script type="text/html" id="tpl-edit-user-capacity">
	<div class="layui-form layui-form-pane" style="padding: 20px;" lay-filter="edit_user_capacity">

		<input type="text" name="id" class="layui-input layui-hide">

		<div class="layui-form-item">
			<label class="layui-form-label">容量(GB)</label>
			<div class="layui-input-block">
				<input type="number" name="capacity" autocomplete="off" lay-verify="required" placeholder="单位：GB (可以带小数点)" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn-xs layui-btn layui-btn-warm speedy-btn" data-capacity="0.2">200 MB</button>
				<button class="layui-btn-xs layui-btn layui-btn-warm speedy-btn" data-capacity="0.5">500 MB</button>
				<button class="layui-btn-xs layui-btn layui-btn-warm speedy-btn" data-capacity="1">1 GB</button>
				<button class="layui-btn-xs layui-btn layui-btn-warm speedy-btn" data-capacity="5">5 GB</button>
				<button class="layui-btn-xs layui-btn layui-btn-warm speedy-btn" data-capacity="10">10 GB</button>
			</div>
		</div>

		

	
		<div class="layui-form-item">
			<button class="layui-btn" id="save_user_capacity_btn" lay-submit="" lay-filter="">保存</button>
		</div>
	</div>
</script>

<script type="text/javascript">
	layui.use(['table','form'], function () {
		var table = layui.table, $ = layui.$;
		var form = layui.form;

		$("title").text('用户管理 - 私有云盘');
		var type = app.parseUrl().params.type || 1;
		var url = ['getCollectList', 'getUploadList', ''];
		// console.log(type);
		app.setTopMenu('/user');

		var cols = [
			// { type: 'checkbox', fixed: 'left' }
			{field:'id', title: 'UID', width:80,sort: true}
			, { field: 'username', title: '账号' }
			, { field: 'u_name', title: '昵称'}
			, { field: 'create_time', title: '注册时间' }
			, { field: 'is_admin', title: '角色', width: 90, toolbar: '#table-bar-is_admin' }
			, { field: 'capacity', title: '容量', width: 90, toolbar: '#table-bar-capacity' }
			, { field: 'status', title: '状态' , width: 90, toolbar: '#table-bar-status'}
			, { title: '操作', toolbar: '#table-bar-operation', align: 'center' }
		];


		table.render({
			elem: '#data-table'
			,id:'data-table'
			, url: "/api/admin/userGetList"
			, headers: { 'Token': app.getToken() }
			, method: 'post' //如果无需自定义HTTP类型，可不加该参数
			, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			, skin: 'line'
			, cols: [cols]
			, height:'full-190'
		});

	

		function listenBox(){
		
			// 表格行按钮事件
			table.on('tool(data-table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				if (layEvent === 'detail') { //查看
					//do somehing
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function (index) {
						
						// layer.close(index);
						//向服务端发送删除指令
						var postData={};
						// postData['ids']=[data.id];
						postData['id'] = data.id;
						// console.log(postData);
						app.ajaxPost('/api/admin/userDelete', postData, function () {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
						});
					});
				}else if (layEvent === 'update') { //修改
					data.password='';
					console.log(data);
					edit_user_info(data); 
				}else if(layEvent === "set_capacity"){
					edit_user_capacity(data)
				}
			});


			table.on('checkbox(data-table)', function (obj) {
				var checkStatus = table.checkStatus('data-table'); //idTest 即为基础参数 id 对应的值
				if (checkStatus.data.length == 0) {
					$('.fast-menu-btn-move').addClass('layui-hide');
					$('.fast-menu-btn-copy').addClass('layui-hide');
				}else{
					$('.fast-menu-btn-move').removeClass('layui-hide');
					$('.fast-menu-btn-copy').removeClass('layui-hide');
				}
				console.log(obj); //当前是否选中状态
				console.log(obj.data); //选中行的相关数据
				console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
			});

			$('#add_user').click(function(){
				edit_user_info();
			})

			

		}
		// 监听集
		listenBox();

		// 编辑用户信息
		function edit_user_info(val){
			var title;
			if(val){
				title = '编辑'
			}else{
				title = '新增'
			}
			var layer_index=app.layer({
				type: 1,
				title: title,
				area:['400px'],
				content: $('#tpl-edit-user-info').html(),
				success: function (index) {
					form.render();

					// 保存按钮
					$('#save_user_info_btn').click(function(){
						var  data= form.val('edit_user_info');
						if(data.id){
							app.ajaxPost('/api/admin/userUpdate', data, function () {
								// layer.msg('修改完成');
								layer.close(layer_index);
							})
						}else{
							if(data.password==''){
								layer.msg('密码不能为空');
								return;
							}
							app.ajaxPost('/api/admin/userAdd', data, function (res) {
								if (res.err_code!=0){
									layer.msg(res.err_msg)
									return
								}
								layer.close(layer_index);
							})
						}
						table.reload('data-table');
						console.log(form.val('edit_user_info'));
					})

					if(val){
						form.val('edit_user_info', val);
					}
					
				}
			});
		}

		// 编辑容量
		function edit_user_capacity(val) {
			var title;
			if (val) {
				title = '编辑'
			} else {
				title = '新增'
			}
			var layer_index = app.layer({
				type: 1,
				title: title,
				area: ['400px'],
				content: $('#tpl-edit-user-capacity').html(),
				success: function (index) {
					form.render();

					// 保存按钮
					$('#save_user_capacity_btn').click(function () {
						var data = form.val('edit_user_capacity');
						if(data.capacity==0 || data.capacity < 0){
							layer.msg("不能为0,或小于0")
							return
						}
						data.capacity= new Number(data.capacity*1024).toFixed(0)
						console.log(data)
						app.ajaxPost("/api/admin/useSetCapacity", data,function(){
							layer.close(layer_index)
							table.reload('data-table');
						})
						// table.reload('data-table');
						// console.log(form.val('edit_user_info'));
					})

					// 便捷按钮
					$('.speedy-btn').click(function () {
						var data = form.val('edit_user_capacity');
						const size=$(this).data("capacity")
						form.val('edit_user_capacity', { capacity: size});
						// console.log(form.val('edit_user_info'));
					})

					if (val) {
						if(val.capacity!=0){
							val.capacity = val.capacity / 1024 
						}
						val.capacity=Math.floor(val.capacity* 100) / 100
						
						form.val('edit_user_capacity', val);
					}

				}
			});
		}

	
		function start(){
			console.log('当前页面初始化');
			
		}
		app.runTpl('admin_menu', { elem: '#admin_menu' })

		start();
	})
</script>